<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/money-info.css">
    <link rel="stylesheet" href="./css/get-money.css">
    <link rel="stylesheet" href="./css/jiazai.css">
    <title>Webview Example</title>
    <style>
        .fixed-get-wrap {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .qr-content-wrap-info {
            box-sizing: border-box;
            width: 85%;
            padding: 25px 30px;
            background: white;
            border-radius: 8px;
        }
    </style>
</head>

<body>
    <div id='app'>

        <!-- 加载中动画 -->
        <div class='jiazai' v-if='jiazai'>
            <img src="./img/jia-ani.gif" width="50px" height="50px">
        </div>
        <!-- 加载中动画 -->

        <!-- 转入弹窗 -->
        <div id='mask' v-if='offTranSet' @click='offTranSet=false;' style="z-index:1;"></div>
        <transition enter-active-class='animated zoomIn' leave-active-class='animated zoomOut'>
            <div class='fixed-get-wrap' style="z-index:2;" v-if='offTranSet' @click='offTranSet=false;'>
                <div class='qr-content-wrap-info' @click.stop=''>
                    <div class='logo'>
                        <img src="./img/logo.png" width="50px" height="60px">
                    </div>
                    <h1 class='money-title' style="position:relative;">
                        <span v-text='moneyList.coins_ename'>ETH</span>
                        <span v-text='"（"+tranCount+"）"'>1000</span>
                        <!-- <img src="./img/down.svg" height="20px">@click='TTCList=!TTCList'
                        <transition enter-active-class='animated fadeIn' leave-active-class='animated fadeOut'>
                            <div class='TTC-list' v-if='TTCList' style="top:25px;left:30%;width:40%;text-align: center;">
                                <p v-for="(val,index) in 4" :key='index' @click='changeTtc(val)' style="padding-left:0;">123123</p>
                            </div>
                        </transition>   moneyList.user.address-->
                    </h1>
                    <p class='money-address' style="width:100%;overflow: auto;">
                        <span v-text='moneyList.user.address'>sdfasdfassd</span>
                    </p>
                    <!-- <input class='money-address' type="text" style="width:50px;overflow: auto;background:red" value='sdfasdfasdfasdklsdjflkajsdklfjklajklsdfasdfaskdjnmflkjasdkfjk77'> -->
                    <!-- <p class='money-address' v-text='moneyList.user.address'>1324sda324sda1sdd4fas1df5asd</p> -->
                    <div class='assress-img'>
                        <img src="./img/address.png" width="150px" height="150px">
                    </div>
                    <p class='set-money' @click='offSetMoney=true;'>设置金额</p>
                    <button class='close-my' @click='_copy(moneyList.user.address);_toast("复制成功")'>复制地址</button>
                </div>
            </div>
        </transition>
        <!-- 设置金额弹窗 -->
        <div id='mask' @click='offSetMoney=false' v-if='offSetMoney' style="z-index:3;"></div>
        <transition enter-active-class='animated zoomIn' leave-active-class='animated zoomOut'>
            <div class='set-money-info' v-if='offSetMoney' @click='offSetMoney=false' style="z-index:4;">
                <div class='set-money-content' @click.stop=''>
                    <div class='mask-hea'>
                        <span style="opacity:0">1</span>
                        <span>设置金额</span>
                        <img src="./img/close.svg" width="27px" height="27px" @click='offSetMoney=false'>
                    </div>
                    <div class='input'>
                        <div style="position:relative;">
                            <span style="display:flex;align-items:center;" v-text='moneyList.coins_ename'>BTC</span>
                        </div>
                        <div>
                            <input type="text" placeholder="请输入数量" v-model='tranCount'>
                        </div>
                    </div>
                    <button class='sure-get-money' @click='tranSure'>确认</button>
                </div>
            </div>
        </transition>
        <!-- 设置金额弹窗 -->

        <!-- 转入弹窗 -->
        <div class='money-hea'>
            <img @click='close' src="./img/right-black.svg" width="20px" height="20px">
            <span v-text='moneyList.coins_ename'>BTC</span>
        </div>
        <div class='chars-fixed-wrap'>
            <div class='money-intro'>
                <div>
                    <p v-text='parseFloat(moneyList.user.count).toFixed(6)'>0.000000</p>
                    <p><span>≈$</span><span v-text='(parseFloat(moneyList.user.count)*parseFloat(moneyList.coins_price)).toFixed(6)'>0.00</span></p>
                </div>
                <button @click='exchange'>兑换</button>
            </div>
            <div class='chars-info' id='chars-info'></div>
            <div class='asset-title'>
                最近交易记录
            </div>
        </div>
        <div class='trans-list-wrap'>
            <div class='have-list' v-if='moneyList.order&&moneyList.order.length'>
                <div class='list-info' @click='goTransInfo(val)' v-for="(val,index) in moneyList.order" :key='index'>
                    <div class='list-left'>
                        <img :src="val.type==1?'./img/trans-goin.png':'./img/trans-goout.png'" width="30px" height="30px">
                        <div class='time-address'>
                            <p v-text='val.address'>fddf******sdfasdfhsd</p>
                            <p v-text='val.addtime'>2018-10-40 15：12：121</p>
                        </div>
                    </div>
                    <div :class="{'color-green':val.type==1,'color-red':val.type==2}">
                        <span v-text='val.type==1?"+":"-"'>+</span><span v-text='val.amount'>90.00</span ><span v-text='moneyList.coins_ename'>BTC</span>
                    </div>
                </div>
            </div>
            <div class='no-list' v-else>
                <span></span>
                <span>暂无数据</span>
                <span></span>
            </div>
        </div>
        <div class='controll-bottom-wrap'>
            <div @click='transGoOut' :style="{'background':moneyList.is_withdraw==1?'#eee':''}">
                <img src="./img/tran-go.svg" width="20px" height="20px">
                <span>转出</span>
            </div>
            <div @click='transGoIn' :style="{'background':moneyList.is_charge==1?'#eee':'','color':moneyList.is_charge==1?'white':''}">
                <img src="./img/tran-in.svg" width="20px" height="20px">
                <span>转入</span>
            </div>
            <!-- <button @click='transGoOut' :style="{'background':moneyList.is_withdraw==1?'#eee':''}">转出</button>
            <button @click='transGoIn' :style="{'background':moneyList.is_charge==1?'#eee':'','color':moneyList.is_charge==1?'white':''}">转入</button> -->
        </div>
    </div>
    <script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/back.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.qrcode.min.js"></script>
    <script src="js/echarts.simple.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script>
        var getMoney = function(id) {
            app.getData(id);
            app.$data.coinId = id;
        }
        var app = new Vue({
            el: '#app',
            data: {
                //加载动画
                jiazai: false,
                //币种的id
                coinId: '',
                //交易数据
                moneyList: {
                    'coins_ename': '',
                    "coins_price": "0",
                    'is_charge': '0',
                    'is_withdraw': '0',
                    "user": {
                        "address": "0",
                        "count": "0.0000000000",
                    },
                    order: []
                },
                // charData: [],
                //设置收入的数量
                tranCount: 0,
                //控制二维码弹窗
                offTranSet: false,
                //控制设置金额的弹窗
                offSetMoney: false,
                //控制选择币种的列表
                BTCList: false,
                //控制收币种的列表
                TTCList: false,
            },
            methods: {
                close: function() {
                    var web = plus.webview.currentWebview();
                    web.close('none');
                },
                //图表生成
                echars: function() {
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('chars-info'));

                    // 指定图表的配置项和数据
                    var option = {
                        color: ['rgba(103,205,252,.8)'],
                        xAxis: {
                            type: 'category',
                            axisTick: {
                                show: false
                            },
                            boundaryGap: false,
                            // data: this.moneyList.kline
                            // data: ["6519", "6517", "6523", "6545", "6551", "6551", "6526", "6538", "6522", "6511", "6509", "6498", "6471", "6496", "6483", "6523", "6520", "6508", "6487", "6470", "6483", "6480", "6489", "6456", "6489", "6477", "6481", "6484"]
                        },
                        grid: {
                            left: '0px',
                            right: '8px',
                            top: '8px',
                            bottom: '5px',
                            containLabel: true,
                        },
                        yAxis: {
                            type: 'value',
                            min: this.moneyList.min,
                            axisTick: {
                                show: true
                            },
                        },
                        series: [{
                            data: this.moneyList.kline,
                            type: 'line',
                            areaStyle: {}
                        }]
                    };


                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },
                //得到本页的交易所有数据
                getData: function(id) {
                    function arrayMin(arrs) {
                        var min = arrs[0];
                        for (var i = 1; i < arrs.length; i++) {
                            if (arrs[i] < min) {
                                min = arrs[i];
                            }
                        }
                        return min;
                    }
                    var This = this;
                    this.jiazai = true;
                    _post(COINS_VIEW, {
                        "userid": JSON.parse(localStorage.getItem('user')).userid,
                        "coinsid": id
                    }, function(data) {
                        if (data.status == 1) {
                            This.moneyList = data.back;
                            setTimeout(function() {
                                This.jiazai = false;
                                This.moneyList.min = arrayMin(This.moneyList.kline);
                                This.echars();
                            }, 500);
                        } else {
                            _toast(data.msg);
                            setTimeout(function() {
                                plus.webview.currentWebview().close('none');
                            }, 1500);
                        }
                    });
                },
                //去到首页闪兑入口
                exchange: function(data) {
                    var This = this;
                    var web = _openHref('index.html', 'index');
                    web.evalJS("exchange()");
                    setTimeout(function() {
                        _closeCurrent();
                        web.show();
                    }, 300);
                },
                //转出
                transGoOut: function() {
                    if (this.moneyList.is_withdraw == 1) {
                        return;
                    }
                    var This = this;
                    var web = _openHref('trans-go-out.html', 'transGoOut');
                    setTimeout(function() {
                        web.evalJS("send('" + This.coinId + "')");
                    }, 300);
                },
                //转入
                transGoIn: function() {
                    if (this.moneyList.is_charge == 1) {
                        return;
                    }
                    this.offTranSet = true;
                    var This = this;
                    setTimeout(function() {
                        This.tranSure(true);
                    }, 500);
                },
                // //选择的币种
                // changeBtc: function(val) {
                //     console.log(val);
                // },
                // //收的币种
                // changeTtc: function(val) {
                //     console.log(val);
                // },
                //确认收入的点击
                tranSure: function(off) {
                    //生成二维码
                    if (off != true) {
                        //说明是输入了金额进来的，要判断输入的合法性
                        var input = String(parseFloat(this.tranCount));
                        if (input.toLowerCase() == 'nan' || input.length != this.tranCount.length) {
                            _toast('请输入正确的数量');
                            this.tranCount = 0;
                        }
                    }
                    var send = {
                        coinsid: this.coinId,
                        address: this.moneyList.user.address,
                        amount: this.tranCount
                    };

                    $('.assress-img').html('');
                    jQuery('.assress-img').qrcode({
                        render: "canvas", //也可以替换为table
                        width: 150,
                        height: 150,
                        text: JSON.stringify(send)
                    });
                    var This = this;
                    setTimeout(function() {
                        This.offSetMoney = false;
                    }, 50);
                },
                //去到详细的交易记录
                goTransInfo: function(val) {
                    var op = {
                        'backButtonAutoControl': 'close', //返回是关闭当前页
                        'animationOptimization': 'none', //不优化
                    };
                    this.jiazai = true;
                    var This = this;
                    var web = plus.webview.create(val.url, 'text', op);
                    web.addEventListener("loaded", function() {
                        This.jiazai = false;
                        web.show('slide-in-right');
                    }, false);
                }
            }
        });
    </script>
</body>

</html>